<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" 
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:ui="http://java.sun.com/jsf/facelets" 
      xmlns:a4j="http://richfaces.org/a4j" 
      xmlns:rich="http://richfaces.org/rich"> 

<h:head>
<link rel="shortcut icon" href="resources/images/favicon.ico" type="image/x-icon" />
<title>شاشة البيع -- سيليكت</title>     
 <h:outputScript>
        function containsFilter(subString, value){
            if(subString.length>=1) {
                if(value.indexOf(subString)!=-1) 
                    return true;
            }else return false;
        };

    </h:outputScript>

  <h:outputStylesheet> 
.head2wewewewewe {
 background-image: url();
    background-color: #4C9600;
    height: 18px;
    text-align: center;
    vertical-align: middle;
    color:  #000000 ;
    padding: 4px 0;
}
.button {
    background-image: url('resources/images/ai.gif');
}
</h:outputStylesheet>


</h:head> 
<body onload="document.getElementById('myform:desc').focus();">



   <rich:panel  id="mainPanal">
				       <f:facet name="header" >
							<h:panelGroup>
							    <h:outputLabel value="#{msgs.salesapp}" style="COLOR: #3479b1; font-size:20px;" /> 	    
								<a4j:status>
								            <f:facet name="start">
								                <h:graphicImage value="resources/images/ai.gif" style="width:20px; height:20px;"  alt="ai"/>
								            </f:facet>
								</a4j:status>
							</h:panelGroup> 
				       </f:facet> 
    


    
    <h:form id="myform">
 
				
		<h:panelGrid columns="3" id="master" width="100%" >      	
            
		            
			
			
		<h:panelGroup>
            <fieldset class="demo_fieldset"> 
           <legend class="demo_legend"><B style="COLOR: #3479b1; font-size:20px;">بيانات الدفع</B></legend> 
         
                <h:panelGrid columns="2"  id="master2">

		                    <h:outputLabel value="كاش" for="cash" style="font-size:20px;"/>
				             <rich:inputNumberSpinner value="#{saleBacking.sale.cash}" id="cash" label="dd" minValue="0" 
				                                      maxValue="#{saleBacking.sale.total}" cycled="falce" inputSize="6">
				               <a4j:ajax event="change"  render="master2" listener="#{saleBacking.cashValueVhange}" />		
							</rich:inputNumberSpinner>
							
				            <h:outputLabel value="فيزا" for="visa"  style="font-size:20px;"/>
				             <rich:inputNumberSpinner value="#{saleBacking.sale.visa}" id="visa" minValue="0"  maxValue="#{saleBacking.sale.total}"  cycled="falce"  inputSize="6">
				               <a4j:ajax event="change" render="master2" listener="#{saleBacking.visaValueVhange}" />		
							</rich:inputNumberSpinner>
							
				            <h:outputLabel value="كريديت" for="credit"  style="font-size:20px;"/>
				             <rich:inputNumberSpinner value="#{saleBacking.sale.credit}" id="credit" minValue="0"  maxValue="#{saleBacking.sale.total}"  cycled="falce"  inputSize="6">	
				                <a4j:ajax event="change"  render="master2" listener="#{saleBacking.creditValueVhange}" />	
				             </rich:inputNumberSpinner>
				             
				             
				            <h:outputLabel value="الإجمالى" for="totalid"  style="font-size:20px;"/>            
							<h:inputText value="#{saleBacking.sale.total}" id="totalid"  readonly="true" />
    		     </h:panelGrid>
		  
		   </fieldset>
		 </h:panelGroup> 
		 
		 
		 
		 <h:panelGroup>
            <fieldset class="demo_fieldset" > 
           <legend class="demo_legend"><B style="COLOR: #3479b1; font-size:20px;">بيانات البيع</B></legend> 
         
					<h:panelGrid columns="2" id="master1">
		            
    	            <h:outputLabel value="الوصف" for="desc"  style="font-size:20px;"/>
                    <h:inputTextarea id="desc" cols="50"  rows="4" value="#{saleBacking.sale.note}" title="الوصف" tabindex="1" />
    
		            
		            <h:outputLabel value="تاريخ الاستحقاق" for="date1"  style="font-size:20px;"/>       
		            <rich:calendar id="date1" enableManualInput="false" value="#{saleBacking.sale.saleDate}"  tabindex="2"/>
		            
		            <h:outputLabel value="رقم القيد" for="reg_numb"  style="font-size:20px;"/>
		            <h:inputText id="reg_numb" value="#{saleBacking.sale.jvNo}" title="رقم القيد"  tabindex="3"/>

			  	    </h:panelGrid>
		  
		   </fieldset>
		 </h:panelGroup> 
		 
		 
		 
		 <h:panelGroup>
	            <fieldset class="demo_fieldset"> 
	                    <legend class="demo_legend"><B style="COLOR: #3479b1; font-size:20px;">بيانات العميل</B></legend> 
			            <h:panelGrid columns="2"  id="master3">
			            
			            		    <h:outputLabel value="اسم العميل" for="clientName"  style="font-size:20px;"/>
						            <h:inputText id="clientName" value="#{saleBacking.sale.clientName}"   tabindex="4"/>
						           
						            <h:outputLabel value="رقم الموبايل" for="mobileNum"  style="font-size:20px;"/>
						            <h:inputText id="mobileNum" value="#{saleBacking.sale.mobileNumber}"  tabindex="5"/>

						            <h:outputLabel value="الإيميل" for="email"  style="font-size:20px;" />
						            <h:inputText id="email" value="#{saleBacking.sale.email}"  tabindex="6" />
						           
			            </h:panelGrid>
			   </fieldset>
		 </h:panelGroup> 
		 
 </h:panelGrid>

	<h:panelGroup id="detail" > 
	
		            <fieldset class="demo_fieldset" > 
	                    <legend class="demo_legend"><B style="COLOR: #3479b1; font-size:20px;">السلع المباعة</B></legend> 
				
							<rich:dataTable value="#{saleBacking.salesLines}" var="line" rows="50" id="datatable" rowKeyVar="rowindex">
							
										<rich:column width="100">
												<f:facet name="header">
												<h:outputLabel value="#{msgs.serial}" style="font-size:15px;"/> 
												</f:facet>
											    <h:outputText value="#{line.viewNo}" id="lineid"/>
										</rich:column>
										
										
										<rich:column width="250" style="width:250px;">
											   <f:facet name="header"><h:outputLabel value="#{msgs.item}" style="font-size:15px;"/></f:facet>
									           <rich:select enableManualInput="true" 
									                        listHeight="300" 
									                        value="#{line.itemId}"
									                        clientFilterFunction="containsFilter" 
									                        style="width:150px;font-weight : bold;font-size:56px" 
									                        converter="#{itemConverter}"
									                        id="itemid"
									                        defaultLabel="برجاء كتابة اسم أو كود الصنف" 
									                        tabindex="#{7+(6*rowindex)}" 
									                        selectFirst="true" 
									                        >
									                <f:selectItems value="#{saleBacking.items}"  var="item" itemValue="#{item}" itemLabel="#{item.code} #{item.name}"  />
									                <a4j:ajax event="change" 
									                   		  execute="@this" 
									                          listener="#{saleBacking.updateRowData}" 
									                          render="datatable master2" 
									                          oncomplete="document.getElementById('myform:datatable:#{line.viewNo-1}:priceid').focus();"/>
									            </rich:select>
									            
										</rich:column>  
										
										 <!--<rich:column >
											   <f:facet name="header"><h:outputLabel value="#{msgs.item}" style="font-size:15px;"/></f:facet>
											   
												<rich:autocomplete 
												  					value="#{line.itemId}"
												  					clientFilterFunction="containsFilter" 
												  				    autocompleteMethod="#{saleBacking.autocomplete}"
												                    showButton="true"
												                    mode="cachedAjax" 
												                    minChars="3" 
												                    autofill="true"
												                    selectFirst="true"
												                    id="autocompleteId"
												                    layout="list"
												                    converter="#{itemConverter}"
												                    var="item"
												                    fetchValue="#{item}"
												                    >
												                    #{item}
												</rich:autocomplete>
												
										</rich:column>
										 -->
										<rich:column>
												<f:facet name="header"><h:outputLabel value="#{msgs.itemPrice}" style="font-size:15px;"/></f:facet>
												<h:inputText value="#{line.itemPrice}" id="priceid" size="8" tabindex="#{8+(6*rowindex)}">
												    <a4j:ajax event="change" execute="@this" listener="#{saleBacking.adjustNetValue}" render="datatable master2" oncomplete="document.getElementsByName('myform:datatable:#{line.viewNo-1}:qtyid')[0].focus();"/>
													<f:convertNumber   pattern="00.00"  />
												</h:inputText>
										</rich:column>
										

						<rich:column>
								<f:facet name="header">
							     	<h:outputLabel value="#{msgs.qty}" style="font-size:15px;"/> 
								</f:facet>
								<rich:inputNumberSpinner  value="#{line.quantity}" id="qtyid"  inputSize="8" minValue="1" tabindex="#{9+(6*rowindex)}" cycled="false">
								   <a4j:ajax event="change" execute="@this" listener="#{saleBacking.adjustNetValue}" render="datatable master2" oncomplete="document.getElementById('myform:datatable:#{line.viewNo-1}:barcodeid').focus();"/>	
								</rich:inputNumberSpinner>							
						</rich:column>
										
										
										<rich:column>
												<f:facet name="header"><h:outputLabel value="#{msgs.barcode}" style="font-size:15px;"/> </f:facet>
												    <h:inputText value="#{line.barcode}" id="barcodeid" size="30" tabindex="#{10+(6*rowindex)}">
												</h:inputText>
										</rich:column>
									
											
											
										<rich:column>
												<f:facet name="header"><h:outputLabel value="#{msgs.totalNet}" style="font-size:15px;" /> </f:facet>
												<h:inputText value="#{line.netValue}" id="netValueid" size="8" tabindex="#{11+(6*rowindex)}" readonly="true"/> 
										</rich:column>
							
							
							            <rich:column>
												<f:facet name="header"><h:outputLabel value="#{msgs.notes}" style="font-size:15px;"/> </f:facet>
							
							<h:inputTextarea  value="#{line.notes}" id="notesid" cols="60" rows="1" tabindex="#{12+(6*rowindex)}">
								<a4j:ajax   event="blur" 
											execute="datatable" 
											render="datatable" 
											listener="#{saleBacking.addNewLineInDataTable}"
											oncomplete="document.getElementById('myform:datatable:#{saleBacking.view_no_counter-1}:itemidInput').focus();"/>
							</h:inputTextarea>
							 
				</rich:column>
			
				 <rich:column>	
							<f:facet name="header"><h:outputLabel value="#{msgs.hasBarcode}" style="font-size:15px;"/> </f:facet>
					        <h:outputText value="#{line.itemId.needBarCodeTf}" id="hasBarcodeid"	/>			 
				</rich:column>
									
									
																					
							</rich:dataTable>
			     </fieldset>
             </h:panelGroup> 
				
			<br/>
			<br/>
			<br/>
			<br/>
			<br/>

			
		<h:commandButton value="إلغاء"  action="#{saleBacking.cancelSale}" style="width : 99px; height : 43px;font-weight:bold;font-size:20px;">
		       <a4j:ajax render="master datatable"/>
		</h:commandButton>
		<h:commandButton value="حفظ و إغلاق" style="width : 99px; height : 43px;font-weight:bold;font-size:20px;"/>
		<h:commandButton value="حفظ و طباعة" style="width : 99px; height : 43px;font-weight:bold;font-size:20px;"/>
		
		<h:commandButton action="#{saleBacking.insertSale}" styleClass="button"
		                 value="حفظ و جديد" style="width : 99px; height : 43px;font-weight:bold;font-size:20px;">
		        <a4j:ajax render="master datatable status_msg"/>
		</h:commandButton>

		
		<h:commandButton action="#{saleBacking.addNewLineInDataTable}" styleClass="button"
		                 value="سطر جديد" style="width : 120px; height : 43px;font-weight:bold;font-size:20px;">
		 <a4j:ajax  execute="datatable" render="datatable" oncomplete="document.getElementById('myform:datatable:#{saleBacking.view_no_counter-1}:itemidInput').focus();"/>
		</h:commandButton>

 	

   			
	</h:form>			
					  
					 
				</rich:panel>
				
		
						
			<rich:notify stayTime="2000" 
		  		             id="status_msg"
					         rendered="true"  >
				    <f:facet name="summary" >
				        Saved Successfully !
				    </f:facet>
		</rich:notify>							
			
</body> 
</html>


